<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue" // vue
import { getztTableApi, downLoadTable } from "@/api/SZ/ztTable" // 接口
import { FormInstance } from "element-plus" // elment
import { Search, Refresh, Download } from "@element-plus/icons-vue" // 按钮图标
import { shortcuts, Y, M, D } from "@/utils/dateSet"
import { getqueryTeamName } from "@/api/SZ/SZXxfy" // 接口
import { useUserStore } from "@/store/modules/user"

// 缓存
defineOptions({
  name: "ztTable"
})

console.log("测试git 提交")

const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]

const userStore = useUserStore()
const data = reactive<any>({
  searchData: {
    createTime: [
      new Date(Y.value, M.value, D.value, 0, 0, 0).getTime() - 3600 * 1000 * 24 * 1,
      new Date(Y.value, M.value, D.value, 23, 59, 59).getTime()
    ], // 创建时间
    orderSource: "", // 订单来源
    isPack: "否", // 套餐维度
    isDiscard: "否", // 剔除废单
    packState: "否", // 在售
    isPackMaster: "否", // 主套餐
    num: 0, // 录单大等于0
    packName: undefined // 套餐
  }
})

const { searchData } = toRefs(data)
// #region 查
const loading = ref(false)
const tableData = ref<any>([]) //
const tablelist = async () => {
  if (!searchData.value.createTime) {
    searchData.value.createTime = []
  }
  if (!searchData.value.stateTime) {
    searchData.value.stateTime = []
  }
  await getztTableApi({
    ...searchData.value,
    start: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    end: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
  })
    .then((res: any) => {
      tableData.value = res.data
      loading.value = false
    })
    .catch(() => {
      tableData.value = []
    })
}
// tablelist()
// 订单来源根据部门查团队
const queryTeamName = ref()
const TeamName = async () => {
  await getqueryTeamName().then((res: any) => {
    queryTeamName.value = res.data
  })
}
TeamName()
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
// 搜索
function handleSearch() {
  loading.value = true
  tablelist()
  console.log(searchData.value, "搜索")
}
// 重置

function resetSearch() {
  loading.value = true
  searchFormRef.value?.resetFields()
  handleSearch()
}
// #endregion

// #region 改变某一列单元格背景颜色
function handleCellStyle({ columnIndex }: any) {
  // console.log(row, column, rowIndex, columnIndex, "123456789")
  if (columnIndex <= 21 && columnIndex >= 10) {
    // 判断目标列
    return {
      background: "#c7e5f4"
    }
  }
  if (columnIndex <= 3) {
    // 判断目标列
    return {
      background: "#dff0d8"
    }
  }
  return {}
}
// #endregion

// #region 下载
const downLoad = () => {
  downLoadTable({
    ...searchData.value,
    start: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    end: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
  }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "状态表.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
  })
}
// #endregion

//
</script>

<template>
  <div class="app-container">
    <el-card>
      <el-row justify="center" align="middle">
        <el-col>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="createTime" label="时间">
              <el-date-picker
                v-model="searchData.createTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item
              prop="orderSource"
              label="订单来源"
              v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
            >
              <el-select
                v-model.trim="searchData.orderSource"
                clearable
                filterable
                placeholder="请选择订单来源"
                style="width: 240px"
              >
                <el-option v-for="item in queryTeamName" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item prop="isPack" label="套餐维度">
              <el-select v-model="searchData.isPack" clearable placeholder="请选择" style="width: 240px">
                <el-option :key="1" label="是" value="是" />
                <el-option :key="2" label="否" value="否" />
              </el-select>
            </el-form-item>
            <el-form-item prop="isDiscard" label="剔除废单">
              <el-select v-model="searchData.isDiscard" clearable placeholder="请选择" style="width: 240px">
                <el-option :key="1" label="是" value="是" />
                <el-option :key="2" label="否" value="否" />
              </el-select>
            </el-form-item>
            <el-form-item prop="packState" label="在售">
              <el-select v-model="searchData.packState" clearable placeholder="请选择" style="width: 240px">
                <el-option :key="1" label="是" value="是" />
                <el-option :key="2" label="否" value="否" />
              </el-select>
            </el-form-item>
            <el-form-item prop="isPackMaster" label="主套餐">
              <el-select v-model="searchData.isPackMaster" clearable placeholder="请选择" style="width: 240px">
                <el-option :key="1" label="是" value="是" />
                <el-option :key="2" label="否" value="否" />
              </el-select>
            </el-form-item>
            <el-form-item prop="num" label="录单大等于">
              <el-input-number v-model.trim="searchData.num" :min="0" />
            </el-form-item>
            <el-form-item prop="packName" label="套餐">
              <el-input v-model.trim="searchData.packName" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
              <el-button type="primary" :icon="Download" circle @click="downLoad" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 明细 -->
    <el-card class="top">
      <div class="mxbox">
        <el-button type="primary" plain>
          说明：自定义统计维度！ 合计降序！ 录单：所有订单（是否废单影响统计维度）； 发货：处理中 + 受理成功 + 已激活
          +待处理； 激活：已激活；</el-button
        >
      </div>

      <el-table
        :data="tableData"
        :cell-style="handleCellStyle"
        v-loading="loading"
        element-loading-text="加载中..."
        height="800px"
      >
        <el-table-column prop="date" label="维度" align="center" fixed>
          <el-table-column label="" align="center">
            <el-table-column prop="leader" label="负责人" align="center" />
            <el-table-column prop="order_source" label="订单来源" align="center" />
            <el-table-column prop="order_sku" label="套餐id" align="center" />
            <el-table-column prop="package_name" label="套餐名称" align="center" show-overflow-tooltip />
          </el-table-column>
        </el-table-column>

        <el-table-column prop="two" label="店铺" align="center">
          <el-table-column label="占比" align="center">
            <el-table-column prop="fhcg_odds" label="发货成功率" align="center">
              <template #default="scope">
                <el-progress
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.fhcg_odds"
                  text-color="#ff0000"
                />
              </template>
            </el-table-column>
            <el-table-column prop="ldjh_odds" label="占录单激活率" align="center">
              <template #default="scope">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="scope.row.ldjh_odds" />
              </template>
            </el-table-column>
            <el-table-column prop="fhjh_odds" label="占发货激活率" align="center">
              <template #default="scope">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="scope.row.fhjh_odds" />
              </template>
            </el-table-column>
            <el-table-column prop="jhjy_odds" label="占激活结佣率" align="center">
              <template #default="scope">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="scope.row.jhjy_odds" />
              </template>
            </el-table-column>
            <el-table-column prop="ldjy_odds" label="占录单结佣率" align="center">
              <template #default="scope">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="scope.row.ldjy_odds" />
              </template>
            </el-table-column>
            <el-table-column prop="fhjy_odds" label="占发货结佣率" align="center">
              <template #default="scope">
                <el-progress :text-inside="true" :stroke-width="14" :percentage="scope.row.fhjy_odds" />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <el-table-column prop="clz_state" label="处理中" align="center" />
            <el-table-column prop="dcl_state" label="待处理" align="center" />
            <el-table-column prop="slcg_state" label="受理成功" align="center" />
            <el-table-column prop="yjh_state" label="已激活" align="center" />
            <el-table-column prop="sbct_state" label="失败已重提" align="center" />
            <el-table-column prop="slsb_state" label="受理失败" align="center" />
            <el-table-column prop="wtj_state" label="未提交" align="center" />
            <el-table-column prop="tjsb_state" label="提交失败" align="center" />
            <el-table-column prop="sblj_state" label="失败拦截" align="center" />
            <el-table-column prop="sum_num" label="合计" align="center" />
            <el-table-column prop="fd_num" label="废单量" align="center" />
            <el-table-column prop="jy_num" label="结佣量" align="center" />
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="sthree"
          label="公司"
          v-if="userStore.roles[0] == '超级管理员' || userStore.roles[0] == '管理账户'"
          align="center"
        >
          <el-table-column label="占比" align="center">
            <el-table-column prop="fhcg_odds1" label="发货成功率1" align="center">
              <template #default="scope">
                <el-progress
                  status="success"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.fhcg_odds1"
                />
              </template>
            </el-table-column>
            <el-table-column prop="ldjh_odds1" label="占录单激活率1" align="center">
              <template #default="scope">
                <el-progress
                  status="success"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.ldjh_odds1"
                />
              </template>
            </el-table-column>
            <el-table-column prop="fhjh_odds1" label="占发货激活率1" align="center">
              <template #default="scope">
                <el-progress
                  status="success"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.fhjh_odds1"
                />
              </template>
            </el-table-column>
            <el-table-column prop="jhjy_odds1" label="占激活结佣率1" align="center">
              <template #default="scope">
                <el-progress
                  status="success"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.jhjy_odds1"
                />
              </template>
            </el-table-column>
            <el-table-column prop="ldjy_odds1" label="占录单结佣率1" align="center">
              <template #default="scope">
                <el-progress
                  status="success"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.ldjy_odds1"
                />
              </template>
            </el-table-column>
            <el-table-column prop="fhjy_odds1" label="占发货结佣率1" align="center">
              <template #default="scope">
                <el-progress
                  status="success"
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.fhjy_odds1"
                />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <el-table-column prop="clz_state1" label="处理中1" align="center" />
            <el-table-column prop="dcl_state1" label="待处理1" align="center" />
            <el-table-column prop="slcg_state1" label="受理成功1" align="center" />
            <el-table-column prop="yjh_state1" label="已激活1" align="center" />
            <el-table-column prop="sbct_state1" label="失败已重提1" align="center" />
            <el-table-column prop="slsb_state1" label="受理失败1" align="center" />
            <el-table-column prop="wtj_state1" label="未提交1" align="center" />
            <el-table-column prop="tjsb_state1" label="提交失败1" align="center" />
            <el-table-column prop="sblj_state1" label="失败拦截1" align="center" />
            <el-table-column prop="sum_num1" label="合计1" align="center" />
            <el-table-column prop="fd_num1" label="废单量1" align="center" />
            <el-table-column prop="jy_num1" label="结佣量1" align="center" />
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
.widthsmall {
  width: 80%;
}
.top {
  margin-top: 20px;
}
.mxbox {
  display: flex;
  justify-content: space-between;
}
.mxboxRight {
  margin-right: 10%;
}
::v-deep(.el-progress-bar__innerText) {
  color: #000;
}
</style>
